<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能识别报警</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="../index1/page/css/index1.css">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="../index1/page/js/jquery.js"></script>
    <script>
        $(function () {
            $('.myscroll').myScroll({
                speed: 30, //数值越大，速度越慢
                rowHeight: 38 //li的高度
            });
        });
        $(document).ready(function () {
            var whei = $(window).width()
            $("html").css({ fontSize: whei / 22 });
            $(window).resize(function () {
                var whei = $(window).width();
                $("html").css({ fontSize: whei / 22 })
            });
        });
    </script>
</head>
<style>
    #container {
        height: 100%;
        width: 100%;
        margin: 0;
    }
</style>
<body>
<main class="index-section">
    <section class="home-section left">
        <div class="home-box">
            <h3 class="home-h">报警信息处理详情</h3>
<!--            <p class="chart-style" id="charts"></p>-->
            <div  id="charts"></div>
                <ul class="home-notice">
                    <li><a href="#">天府广场站 : 人员拥堵造成闸门故障</a><span style="color: #ff2222">等待处理</span> </li>
                    <li><a href="#">犀浦站 : 上班早高峰人员拥堵</a><span style="color: #ff2222">等待处理</span> </li>
                    <li><a href="#">东升站 : 上班早高峰人员拥堵</a><span style="color: #00a65a">处理成功</span> </li>
                    <li><a href="#">犀浦站 : 列车非正常停靠</a><span style="color: #00a65a">处理成功</span> </li>
                    <li><a href="#">黄石公园站 : 疑似发生人员踩踏</a><span>正在处理</span> </li>
                    <li><a href="#">成都东站 : 人员严重拥堵</a><span>正在处理</span> </li>
                    <li><a href="#">电子科大站 : 人员严重拥堵</a><span>正在处理</span> </li>
                    <li><a href="#">双流站 : 高温处理</a><span style="color: #00a65a">处理成功</span> </li>
                    <li><a href="#">合林站 : 疑似发生紧急事件</a><span style="color: #00a65a">处理成功</span> </li>
                    <li><a href="#">龙王站 : 人员严重拥堵</a><span style="color: #00a65a">处理成功</span> </li>
                </ul>
<!--            <div>-->
<!--                <video autoplay="autoplay" loop="loop"  class="dataAllBorder02 video_cage" style="width: 100%;height: 225px">-->
<!--                    <source class="video" title="主监控位" src="video/shibie.MP4"/>-->
<!--                </video>-->
<!--            </div>-->
        </div>
        <div class="home-box">
            <h3 class="home-h">人流峰值统计图</h3>
            <p class="chart-style" id="charts01"></p>
        </div>
    </section>
    <div class="look-div">
        <h3 class="look-top">智能监控</h3>
        <ul class="look-ul">
            <li><p><img src="img/label_viz2.png" title="犀浦地铁站/早高峰:人员严重拥堵"></p>
                <p style="color: white">87 : 严重拥堵</p></li>
            <li><p><img src="img/label_viz.png" title="天府广场地铁站/列车非正常停运人员"></p>
                <p style="color: white">98 : 严重拥堵</p></li>
            <li><p><img src="img/label_viz3.png" title="犀浦地铁站/客流畅通"></p>
                <p style="color: white">32 : 流畅</p></li>
        </ul>
    </div>
    <section class="home-section-cen left" id="map">
        <div id="container" tabindex="0"></div>
    </section>
    <section class="home-section left">
        <div class="home-box">
            <h3 class="home-h">最新报警信息</h3>
            <div id="FontScroll" class="myscroll" style="height: 4.3rem">
                <div class="gun">
                    <span style="font-size: 13px">报警编号</span>
                    <span style="font-size: 13px">报警地点</span>
                    <span style="font-size: 13px">详细信息</span>
<!--                    <span style="font-size: 13px"></span>-->
                </div>>
                <ul>
                    <li style="font-size: 10px">
                        <div class="fontInner clearfix">
                                    <span>
                                        <b>1</b>
                                    </span>
                            <span>犀浦站</span>
                            <span>拥堵报警</span>
                        </div>
                    </li>
                    <li style="font-size: 10px">
                        <div class="fontInner clearfix">
                                    <span>
                                        <b>2</b>
                                    </span>
                            <span>龙泉站</span>
                            <span>火灾报警</span>
                        </div>
                    </li>
                    <li style="font-size: 10px">
                        <div class="fontInner clearfix">
                                    <span>
                                        <b>3</b>
                                    </span>
                            <span>中医大省医院站</span>
                            <span>故障检修</span>
                        </div>
                    </li>
                    <li style="font-size: 10px">
                        <div class="fontInner clearfix">
                                    <span>
                                        <b>4</b>
                                    </span>
                            <span>地铁线路2</span>
                            <span>高温预警</span>
                        </div>
                    </li>
                    <li style="font-size: 10px">
                        <div class="fontInner clearfix">
                                    <span>
                                        <b>5</b>
                                    </span>
                            <span>A类地铁</span>
                            <span>紧急事件</span>
                        </div>
                    </li>
                    <li style="font-size: 10px">
                        <div class="fontInner clearfix">
                                    <span>
                                        <b>6</b>
                                    </span>
                            <span>B型地铁</span>
                            <span>非正常停靠</span>
                        </div>
                    </li>
                    <li style="font-size: 10px">
                        <div class="fontInner clearfix">
                                    <span>
                                        <b>7</b>
                                    </span>
                            <span>有轨电车</span>
                            <span>交通事故堵塞</span>
                        </div>
                    </li>
                    <li style="font-size: 10px">
                        <div class="fontInner clearfix">
                                    <span>
                                        <b>8</b>
                                    </span>
                            <span>宽窄巷子站</span>
                            <span>人员拥堵</span>
                        </div>
                    </li>
                    <li style="font-size: 10px">
                        <div class="fontInner clearfix">
                                    <span>
                                        <b>9</b>
                                    </span>
                            <span>太古里站</span>
                            <span>人员拥堵</span>
                        </div>
                    </li>
                    <li style="font-size: 10px">
                        <div class="fontInner clearfix">
                                    <span>
                                        <b>10</b>
                                    </span>
                            <span>动物园站</span>
                            <span>医疗事故</span>
                        </div>
                    </li>
                    <li style="font-size: 10px">
                        <div class="fontInner clearfix">
                                    <span>
                                        <b>11</b>
                                    </span>
                            <span>东升站</span>
                            <span>人员拥堵</span>
                        </div>
                    </li>
                    <li style="font-size: 10px">
                        <div class="fontInner clearfix">
                                    <span>
                                        <b>12</b>
                                    </span>
                            <span>天府广场站</span>
                            <span>高温处理</span>
                        </div>
                    </li>
                    <li style="font-size: 10px">
                        <div class="fontInner clearfix">
                                    <span>
                                        <b>13</b>
                                    </span>
                            <span>茶店子站</span>
                            <span>人员拥堵</span>
                        </div>
                    </li>
                    <li style="font-size: 10px">
                        <div class="fontInner clearfix">
                                    <span>
                                        <b>14</b>
                                    </span>
                            <span>天府北站</span>
                            <span>高温处理</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="home-box">
            <h3 class="home-h">实时监控</h3>
             <video autoplay="autoplay" loop="loop" width="100%" >
<!--             <source  title="主监控位" src="video/test.mov"/>-->
                 <source src="video/sb1.mp4" type="video/mp4"/>
             </video>
<!--            <embed src="video/shibie.mov"/>-->
        </div>
    </section>
</main>
<script src="js/jquery.min.js"></script>
<script src="js/echarts.common.min.js"></script>
<!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5ieMMexWmzB9jivTq6oCRX9j&callback"></script>-->
<script src="js/home.js"></script>
<script src="../index1/page/js/fontscroll.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=78d2c8a55b62cb049653ace920a563dc&plugin=AMap.Geocoder"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript">
    //初始化地图对象，加载地图
    var map = new AMap.Map("container", {
        resizeEnable: true,
        mapStyle: 'amap://styles/1cb196e91d9c8143886b9d2c68eff8d0',
        zoom: 12,
        Loca:{
            version: '1.3.2',
        }
    });
    //构建自定义信息窗体
    var infoWindow = new AMap.InfoWindow({
        anchor: 'middle-left',
        content: '这是信息窗体！这是信息窗体！',
    });

    var geocoder = new AMap.Geocoder({
        city: '全国',
        radius: 1000
    });

    function setAnchor(){
        var anchor = this.id;
        infoWindow.setAnchor(anchor)
    }
    //绑定radio点击事件
    var radios = document.querySelectorAll("#coordinate input");
    radios.forEach(function(ratio) {
        ratio.onclick = setAnchor;
    });
    function showInfoClick(e){
        infoWindow.close();
        var address;
        let num = parseInt(5000 * Math.random() + 1000);
        geocoder.getAddress(e.lnglat.getLng()+','+e.lnglat.getLat(), function(status, result) {
            if (status === 'complete'&&result.regeocode) {
                address = result.regeocode.formattedAddress;
                infoWindow.setContent('<span>【'+e.lnglat.getLng()+','+e.lnglat.getLat()+'】</span><br/><input class="text"  name="site" value="'+address+'"><br/><input class="text"  name="site" value="预测客流量 : '+num+'">')
                infoWindow.open(map,[e.lnglat.getLng(),e.lnglat.getLat()])
            }else{alert(JSON.stringify(result))}
        });
    }
    // 事件绑定
    // log.success("绑定事件!");
    map.on('click', showInfoClick);
    //标记
</script>
</body>
</html>